<template>
  <div class="pages gradesList">
    <div class="pageLevel" v-if="!sub">
      <div class="tableSearch">
        <el-form size="small" label-width="70px">
          <el-form-item label-width="70px" label="手机号码">
            <el-input type="text" v-model="selectdata.phone" placeholder="手机号码"></el-input>
          </el-form-item>
          <el-form-item label-width="70px" label="报名姓名">
            <el-input type="text" v-model="selectdata.name" placeholder="报名姓名"></el-input>
          </el-form-item>
          <el-form-item label-width="70px" label="身份证号">
            <el-input type="text" v-model="selectdata.idNumber" placeholder="身份证号"></el-input>
          </el-form-item>
          <el-form-item label label-width="20px">
            <el-button type="primary" @click="searchSelect()">查询</el-button>
            <el-button @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" size="medium" tooltip-effect="dark" style="width: 100%">
        <el-table-column prop="index" width="50" label="序号"></el-table-column>

        <el-table-column prop="name" width="150" align="center" label="报名姓名"></el-table-column>
        <el-table-column prop="idNumber" align="center" width="200" label="身份证号"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="phone" align="center" label="手机号码"></el-table-column>
        <el-table-column prop="registeTime" align="center" label="成绩录入时间"></el-table-column>
        <el-table-column prop="ticketState" align="center" label="考试内容">
          <template>母婴照护指导</template>
        </el-table-column>
        <el-table-column prop="examScore" :formatter="examScoreData" align="center" label="成绩"></el-table-column>
        <el-table-column align="center" width="200" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="cellClick(scope.row.id,scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <page-unit :pageData="pageData" :func="getcouponList"></page-unit>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import pageUnit from "@/components/Page";
import state from "@/util/state";
import util from "@/util";
import { trainRegisteLIst } from "@/api";
import dateClass from "@/util/date.js";
const date = new dateClass();
export default {
  data() {
    return {
      examScoreData: state.examScoreData,
      tableData: [{}],
      selectdata: {
        name: "",
        idNumber: "",
        phone: ""
      },
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      }
    };
  },
  components: { pageUnit },
  computed: mapState(["merchantId", "sub", "power"]),
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.getcouponList(this.pageData.pageSize, this.pageData.currentPage);
        }
      },
      deep: true
    }
  },
  mounted() {
    this.pageData.currentPage = 1;
    this.getcouponList(this.pageData.pageSize, this.pageData.currentPage);
  },
  methods: {
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    //查看跳转
    cellClick(id,row) {
      util.routerTo("/training-center/reManagement/gradesList/gradesDetails", {
        id: id,
        row:row
      });
    },
    //重置
    reset() {
      this.selectdata.name = "";
      this.selectdata.idNumber = "";
      this.selectdata.phone = "";
    },
    //搜索
    searchSelect() {
      this.pageData.currentPage = 1;
      this.getcouponList(this.pageData.pageSize, this.pageData.currentPage);
    },
    //成绩列表
    getcouponList(pageSize, pageNum) {
      let data = {
        source: 2, //来源 0-报名列表 1-报名管理 2-成绩列表
        shopId: this.merchantId,
        pageSize: pageSize,
        pageNo: pageNum,
        status: "4,5", //状态 0-待审核 1-审核通过（待录入） 2-审核不通过（审核失败）3-待录成绩 4-待寄证书 5-已寄证书多个类型用逗号隔开）
        name: this.selectdata.name,
        idNumber: this.selectdata.idNumber,
        phone: this.selectdata.phone,
        certificateType: 0 //报名类型:0-母婴照护指导
      };
      trainRegisteLIst(data).then(res => {
         res.data.list.forEach((ele, index)  => {
           ele.index = (index + 1) +(pageNum-1)*pageSize;
           ele.registeTime = date.timestampToTimes(ele.scoreEnterTime);
        });
        this.tableData = res.data.list;
        this.pageData.totalItems = res.data.total;
        this.pageData.currentPage = pageNum;
      });
    }
  }
};
</script>

<style scoped>
.tableSearch {
  position: relative;
}
.input {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 33px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.mark {
  position: absolute;
  width: 150px;
  height: 60px;
  top: 50px;
  left: 30px;
  text-align: center;
  border: 1px solid #ccc;
  border-bottom: none;
}
.mark_p {
  width: 100%;
  height: 30px;
  margin: 0;
  font-size: 14px;
  line-height: 30px;
  border-bottom: 1px solid #ccc;
}
.el-input__inner {
  height: 33px !important;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: red;
}
.wrap_button {
  /* word-wrap: break-word; */
  /* word-break: break-all; */
  /* overflow: hidden; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.btn_color {
  color: #409eff;
  font-weight: bold;
}
</style>
